import Vue from 'vue'
import VueRouter from 'vue-router'
import GoodsList from '@/views/Goods/GoodsList'
import GoodsAdd from '@/views/Goods/GoodsAdd'
import Orders from '@/views/Orders'
import Reports from '@/views/Reports'
import NotFound from '@/views/NotFound'
import {
  getUserApi
} from '@/api/user'
// 更改以下路由组件的导入方式为路由懒加载
// import Login from '@/views/Login'
// 建议大家要对路由做分组，分组的原则是：同一个模块的路由放在一个组中，这样在打包时，会被打包到同一个文件中,如果不分组的话，一个路由就会产生1个文件，加载时就会发起N个http请求
const Login = () => import(/* webpackChunkName:"login_home_welcome" */ '@/views/Login')
// import Home from '@/views/Home'
const Home = () => import(/* webpackChunkName:"login_home_welcome" */ '@/views/Home')
// import Welcome from '@/views/Welcome'
const Welcome = () => import(/* webpackChunkName:"login_home_welcome" */ '@/views/Welcome')

// import Users from '@/views/Users'
const Users = () => import(/* webpackChunkName:"rbac" */ '@/views/Users')
// import Roles from '@/views/Roles'
const Roles = () => import(/* webpackChunkName:"rbac" */ '@/views/Roles')
// import Rights from '@/views/Rights'
const Rights = () => import(/* webpackChunkName:"rbac" */ '@/views/Rights')

// import Cates from '@/views/Cates'
const Cates = () => import(/* webpackChunkName:"cate" */ '@/views/Cates')
// import Params from '@/views/Params'
const Params = () => import(/* webpackChunkName:"cate" */ '@/views/Params')

Vue.use(VueRouter)
const routes = [{
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    redirect: '/welcome',
    // 子路由
    children: [{
        path: '/welcome',
        name: 'Welcome',
        component: Welcome
      },
      {
        path: '/users',
        name: 'Users',
        component: Users
      },
      {
        path: '/roles',
        name: 'Roles',
        component: Roles
      },
      {
        path: '/rights',
        name: 'Rights',
        component: Rights
      },
      {
        path: '/categories',
        name: 'Cates',
        component: Cates
      },
      {
        path: '/categories',
        name: 'Cates',
        component: Cates
      },
      {
        path: '/params',
        name: 'Params',
        component: Params
      },
      {
        path: '/goods',
        name: 'GoodsList',
        component: GoodsList
      },
      {
        path: '/goodsAdd',
        name: 'GoodsAdd',
        component: GoodsAdd
      },
      {
        path: '/orders',
        name: 'Orders',
        component: Orders
      },
      {
        path: '/reports',
        name: 'Reports',
        component: Reports
      }

    ]
  },

  // 404页面
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }
]
const router = new VueRouter({
  routes
})
// 配置前置路由导航守卫
router.beforeEach(async (to, from, next) => {
  // 如果是登录或者错误的页面，直接放行
  if (to.path === '/login' || to.name === 'NotFound') {
    return next()
  }
  // 如果是其他页面，判断是否有token
  if (!window.sessionStorage.getItem('token')) {
    Vue.prototype.$message.error('请先登录')
    return next('/login')
  }

  // 有token,验证token的有效性,需要在请求头中携带token
  try {
    await getUserApi({
      pagenum: 1,
      pagesize: 10
    })
    // token有效
    next()
  } catch (e) {
    return router.push('/login')
  }
})

export default router
